<template>
    <div>
        <!-- tab栏导航 -->
        <van-tabs v-model="active" @click="getlistimg">
            <!-- 标题导航栏 -->
            <van-tab :title="item.title" v-for="item in title" :key="item.id" :name="item.id" click>
               <!-- 图片 -->
                <div v-for="item2 in potoImg" :key='item2.id' class="potoImg" @click="potocreate(item2.id)">
                    <img :src="item2.img_url" alt="">
                    <!-- 说明 -->
                    <div class="pototitle">
                         <p>{{item2.seo_title}}</p>
                        <p>{{item2.seo_description}}</p>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 对象里面不能装对象，数组里面可以装对象
            active:0,
            title:[],
            potoImg:[]
        }
    },
    created() {
        // 获取标题
       this.getlisttitle()
    //    获取对应图片
        this.getlistimg('0')
    },
    methods: {
        // 获取标题
       async getlisttitle(){
            const {data:res}=await this.$http.get('/api/getimgcategory')
            if(res.status !==0)return this.$notify({ type: 'error', message: '获取数据失败' })
            this.title=res.message
            this.title.unshift({ title:'全部', id:0})
            // console.log(res)
        },
        //    获取对应图片
        async getlistimg(name){
            const {data:res}=await this.$http.get('/api/getimages/'+name)
            if(res.status !==0)return this.$notify({ type: 'error', message: '获取数据失败' })
            console.log(res)
            this.potoImg=res.message
        },
        potocreate(id){

            // this.$router.push('info/'+id)
            this.$router.push({path:'/poto/info',query:{userid:id}})
        }
    },
}
</script>

<style lang="less" scoped>
.potoImg {
    width: 100%;
    position:relative;
    img{
        width:100%;
    }
    .pototitle {
        position:absolute;
        bottom: 0;
        left: 0;
        background-color:rgba(0,0,0,0.4);
        color:#fff;
    }
}
</style>